<template>
<div class="login-body">
    
     <div class="header">
      <Header></Header>
     </div>
     <div class="main">
        <div class="content">

          <img class="ad" src="../assets/images/bar.jpg" alt="" />
          <div class="form">
            <LoginForm></LoginForm>
          </div>
           
        </div>
     </div>
     <div class="footer">
      <Footer></Footer>
     </div>

</div>
</template>
<script setup lang='ts'> 
import Header from '@components/login/Header.vue';
import Footer from '@components/login/Footer.vue';
import LoginForm from '@components/login/Login.vue';
 import {ref,reactive} from 'vue';
</script>
<style scoped lang='less'>
 .login-body{
   width: 100%;
   min-height: 100vh;
   background-color: #f7f5f5;
   display: flex;
   flex-direction: column;
   min-width:1190px;
   .main{ 
    flex: 1;
   
 
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;

   
  
    .content{
        width:1190px;
        height: 470px;
      
        margin: 20px auto;
        display: flex;
        .ad{
            width: 712px;
            height: 100%;

        }
        .form{
            height: 100%;
            flex: 1;
            background: #fff;
            padding: 20px;
            box-sizing: border-box;
            margin-left: 30px;
        }
        
    }
   }
   .header{
     width: 100%;
     height: 80px;
     background-color: #fff;
   }
   .footer{
    width: 100%;
     height: 60px;
     background-color: #fff;
   }

 }
</style>